<!--
 * @Author: your name
 * @Date: 2021-09-28 11:45:06
 * @LastEditTime: 2021-09-28 14:40:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-ui\src\views\components\Gallery.vue
-->
<template>
  <div>
    <section class="gallery" id="gallery">

    <h1 class="heading">our <span>gallery</span></h1>

    <div class="box-container">

        <div class="box">
            <img src="../../assets/images/g-1.jpg" alt="">
            <h3 class="title">photos and events</h3>
            <div class="icons">
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-share"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
        </div>

        <div class="box">
            <img src="../../assets/images/g-2.jpg" alt="">
            <h3 class="title">photos and events</h3>
            <div class="icons">
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-share"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
        </div>

        <div class="box">
            <img src="../../assets/images/g-3.jpg" alt="">
            <h3 class="title">photos and events</h3>
            <div class="icons">
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-share"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
        </div>

        <div class="box">
            <img src="../../assets/images/g-4.jpg" alt="">
            <h3 class="title">photos and events</h3>
            <div class="icons">
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-share"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
        </div>

        <div class="box">
            <img src="../../assets/images/g-5.jpg" alt="">
            <h3 class="title">photos and events</h3>
            <div class="icons">
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-share"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
        </div>

        <div class="box">
            <img src="../../assets/images/g-6.jpg" alt="">
            <h3 class="title">photos and events</h3>
            <div class="icons">
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-share"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
        </div>

        <div class="box">
            <img src="../../assets/images/g-7.jpg" alt="">
            <h3 class="title">photos and events</h3>
            <div class="icons">
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-share"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
        </div>

        <div class="box">
            <img src="../../assets/images/g-8.jpg" alt="">
            <h3 class="title">photos and events</h3>
            <div class="icons">
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-share"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
        </div>

        <div class="box">
            <img src="../../assets/images/g-9.jpg" alt="">
            <h3 class="title">photos and events</h3>
            <div class="icons">
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-share"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
        </div>

    </div>

</section>
  </div>
</template>

<script>
export default {
  
}
</script>
<style >
  .gallery .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
    gap:1.5rem;
}

.gallery .box-container .box{
    position: relative;
    border:1rem solid #333;
    border-radius: .5rem;
    height: 25rem;
    cursor: pointer;
    overflow: hidden;
}

.gallery .box-container .box img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.gallery .box-container .box:hover img{
    transform: scale(1.1);
    filter: grayscale();
}

.gallery .box-container .box .title{
    position: absolute;
    top:-10rem; left:0; right: 0;
    background:#dffff5;
    color:#fff;
    text-align: center;
    padding-bottom: 1rem;
    font-size: 2rem;
}

.gallery .box-container .box:hover .title{
    top:0;
}

.gallery .box-container .box .icons{
    position: absolute;
    bottom:-10rem; left:0; right: 0;
    background:#dffff5;
    padding-top: 1rem;
    text-align: center;
}

.gallery .box-container .box:hover .icons{
    bottom: 0;
}

.gallery .box-container .box .icons a{
    font-size: 2rem;
    margin:.5rem 1rem;
    color:#fff;
}

.gallery .box-container .box .icons a:hover{
    color:var(--main-color);
}

</style>